import { ImageResponse } from "next/og";
import { Mark } from "@/components/brand";
import { api } from "@/lib/api";
import { fmtScore, utcDateTime } from "@/lib/format";

export const runtime = "nodejs";
export const alt = "WebSensor event";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

const BG = "#0a0e15";
const PANEL = "#10161f";
const LINE = "#2d394e";
const FG = "#e6e8ee";
const MUTED = "#a3adc2";
const SUBTLE = "#6b7591";
const SIGNAL = "#22d3a5";
const HOT = "#ff5c5c";
const HIGH = "#ff9640";
const MID = "#e4b53b";
const SILENT = "#a78bfa";

function scoreColor(v: number): string {
  return v >= 90 ? HOT : v >= 75 ? HIGH : v >= 50 ? MID : SUBTLE;
}

function clip(s: string, max: number): string {
  return s.length > max ? s.slice(0, max - 1).trimEnd() + "…" : s;
}

export default async function OpenGraphImage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const d = await api.event(slug);
  const e = d?.event ?? null;
  const signal = e ? Math.round(e.signal_score ?? e.importance) : 0;
  const badges: { label: string; color: string }[] = [];
  if (e?.cluster?.state === "breaking") badges.push({ label: "BREAKING", color: HOT });
  if (e?.cluster?.state === "developing") badges.push({ label: "DEVELOPING", color: HIGH });
  if (e?.silent_change) badges.push({ label: "SILENT", color: SILENT });
  if (e && e.first_party !== false) badges.push({ label: "FIRST PARTY", color: SIGNAL });
  if (e?.first_party === false) badges.push({ label: "EXTERNAL", color: SUBTLE });
  if (e?.evidence_label === "CONFIRMED") badges.push({ label: "CONFIRMED", color: SIGNAL });
  const title = e ? clip(e.title, 150) : "Event not found";
  const fontSize = title.length > 110 ? 40 : title.length > 70 ? 46 : 54;

  return new ImageResponse(
    (
      <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 56, background: BG, color: FG, fontFamily: "Inter, system-ui, sans-serif" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 30, fontWeight: 700 }}>
            <Mark size={44} />
            <span>
              Web<span style={{ color: SIGNAL }}>Sensor</span>
            </span>
          </div>
          <div style={{ display: "flex", fontSize: 22, color: SUBTLE, fontFamily: "monospace", letterSpacing: 2 }}>{e ? (e.event_type ?? "").replace(/_/g, " ").toUpperCase() : ""}</div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 20, flex: 1, justifyContent: "center", paddingTop: 24, paddingBottom: 24 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, fontFamily: "monospace", fontSize: 26, color: MUTED, letterSpacing: 3, fontWeight: 700 }}>
            <span>{(e?.source?.name ?? "").toUpperCase()}</span>
            {e?.country ? <span style={{ color: SUBTLE, fontSize: 22 }}>· {e.country}</span> : null}
          </div>
          <div style={{ display: "flex", flexDirection: "row", gap: 32, alignItems: "flex-start" }}>
            <div style={{ display: "flex", flex: 1, fontSize, fontWeight: 700, letterSpacing: -1.2, lineHeight: 1.12, color: FG, overflow: "hidden", maxHeight: fontSize * 1.12 * 3 + 6 }}>{title}</div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", width: 200, height: 160, borderRadius: 12, border: `2px solid ${scoreColor(signal)}`, background: PANEL, flexShrink: 0 }}>
              <div style={{ display: "flex", fontFamily: "monospace", fontSize: 88, fontWeight: 700, color: scoreColor(signal), lineHeight: 1 }}>{e ? fmtScore(signal) : "—"}</div>
              <div style={{ display: "flex", fontSize: 16, letterSpacing: 3, color: SUBTLE, marginTop: 10, fontWeight: 600 }}>SIGNAL</div>
            </div>
          </div>
          {badges.length > 0 && (
            <div style={{ display: "flex", gap: 10 }}>
              {badges.map((b) => (
                <div key={b.label} style={{ display: "flex", padding: "6px 12px", borderRadius: 6, border: `1.5px solid ${b.color}`, color: b.color, fontFamily: "monospace", fontSize: 20, fontWeight: 700, letterSpacing: 2 }}>
                  {b.label}
                </div>
              ))}
            </div>
          )}
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderTop: `1px solid ${LINE}`, paddingTop: 20, fontSize: 22, color: SUBTLE, fontFamily: "monospace" }}>
          <span>www.websensor.io</span>
          <span>{e ? `DETECTED ${utcDateTime(e.detected_at)}` : "LIVE · UTC"}</span>
        </div>
      </div>
    ),
    { ...size },
  );
}